<template>
  <div class="JLabel" :class="[price?'price':'',canClick?'canClick':'']"
       :style="{height: height+'px',lineHeight: height+'px'}"
       @click.stop="click"
  >
    {{ ret }}
  </div>
</template>
<script setup>
import {ref,computed} from "vue";
import tool from "@/utils/tool";
const props = defineProps({
  price: {type: Boolean, default: false}, // 价格样式
  canClick: {type: Boolean, default: false}, // 是否可以点击
  height: {type: Number, default: 28},
  digit: {type: Number, default: 0}
})
const model = defineModel()
const emit = defineEmits(['click'])
const ret = computed(() => {
  if(props.price) {
    return tool.xe.toFixed(model.value, 2)
  }
  if(props.digit > 0) {
    return tool.xe.toFixed(model.value, props.digit)
  }
  return model.value
})
const click = () => {
  emit('click')
}
</script>








<style scoped lang="scss">


.JLabel {
  border-bottom: 1px solid;
  border-color: var(--ti-common-color-border);
  font-size: 14px;
  width: 100%;
  padding-left: 5px;
}
.price {
  font-size: 15px;
  color: #ED5565;
}
.canClick {
  color: #2b85e4;
  &:hover {
    cursor: pointer;
  }
}
</style>